<template>
  <div class="show-table">
    <el-table
    v-loading="loading"
    :data="tableData"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange"
    highlight-current-row
    @row-click="rowClick"
    >
      <!-- :selectable="FnSelectable" -->
    <el-table-column
      type="selection"
      v-if="selections"
      width="40">
    </el-table-column>
    <el-table-column
      :label="lableList.id"
      v-if="lableList.id"
      >
      <template slot-scope="scope">
        <span :title="scope.row.id" v-if="scope.row.id">
          {{scope.row.id}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <!-- 是否超时 -->
    <el-table-column
      :label="lableList.overtime"
      v-if="lableList.overtime"
      width="70"
      >
      <template slot-scope="scope">
        <span :title="scope.row.overtime" v-if="scope.row.overtime" class="overtime">
          {{scope.row.overtime}}
        </span>
        <span v-else>
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n1"
      v-if="lableList.n1"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n1" v-if="scope.row.n1">
          {{scope.row.n1}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n2"
      v-if="lableList.n2"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n2" v-if="scope.row.n2">
          {{scope.row.n2}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n3"
      v-if="lableList.n3"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n3" v-if="scope.row.n3">
          {{scope.row.n3}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

        <!-- 我的任务手机号码 -->
    <!-- <el-table-column
      :label="lableList.myMissionPhone"
      v-if="lableList.myMissionPhone"
      class-name="cell-call-up"
      width='180px'
      >
      <template slot-scope="scope">
        <div class="call-up clearfix" v-if="scope.row.myMissionPhone">
          <span>
            {{scope.row.myMissionPhone}}
          </span>
          <template v-if="scope.row.customerStatus=='2'">
            <img src="../../img/hong.png" title="不加零" class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionPhone1',content:scope.row})">
            <img src="../../img/hong.png" title="加零"   class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionPhone2',content:scope.row})">
          </template>        
          <template v-if="scope.row.customerStatus == '1'">
            <img src="../../img/lv.png"   title="不加零" class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionPhone1',content:scope.row})">
            <img src="../../img/lv.png"   title="加零"   class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionPhone2',content:scope.row})">
          </template>
        </div>
        <div class="call-up call-up-null clearfix" v-else>
          <span>
            -
          </span>
        </div>
      </template>
    </el-table-column> -->

        <!-- 我的任务电话号码 -->
    <!-- <el-table-column
      :label="lableList.myMissionNum"
      v-if="lableList.myMissionNum"
      class-name="cell-call-up"
      width='180px'
      >
      <template slot-scope="scope">
        <div class="call-up clearfix" v-if="scope.row.myMissionNum">
          <span>
            {{scope.row.myMissionNum}}
          </span>
          <template v-if="scope.row.customerStatus=='2'">
            <img src="../../img/hong.png" title="不加零" class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionNum1',content:scope.row})">
            <img src="../../img/hong.png" title="加零"   class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionNum2',content:scope.row})">
          </template>
          <template v-if="scope.row.customerStatus=='1'">
            <img src="../../img/lv.png" title="不加零" class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionNum1',content:scope.row})">
            <img src="../../img/lv.png" title="加零"   class="call-up-icon" @dblclick="FnGetSortableFn({type:'myMissionNum2',content:scope.row})">
          </template>
          </div>
        <div class="call-up call-up-null clearfix" v-else>
          <span>
            -
          </span>
        </div>
      </template>
    </el-table-column> -->

    <el-table-column
      :label="lableList.n4"
      v-if="lableList.n4"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n4" v-if="scope.row.n4">
          {{scope.row.n4}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n5"
      v-if="lableList.n5"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n5" v-if="scope.row.n5">
          {{scope.row.n5}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.sex"
      v-if="lableList.sex"
      width='40'
      >
      <template slot-scope="scope">
        <span :title="scope.row.sex" v-if="scope.row.sex">
          {{scope.row.sex}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n6"
      v-if="lableList.n6"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n6" v-if="scope.row.n6">
          {{scope.row.n6}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n7"
      v-if="lableList.n7"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n7" v-if="scope.row.n7">
          {{scope.row.n7}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n8"
      v-if="lableList.n8"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n8" v-if="scope.row.n8">
          {{scope.row.n8}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n9"
      v-if="lableList.n9"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n9" v-if="scope.row.n9">
          {{scope.row.n9}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n10"
      v-if="lableList.n10"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n10" v-if="scope.row.n10">
          {{scope.row.n10}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n11"
      v-if="lableList.n11"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n11" v-if="scope.row.n11">
          {{scope.row.n11}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n12"
      v-if="lableList.n12"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n12" v-if="scope.row.n12">
          {{scope.row.n12}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n13"
      v-if="lableList.n13"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n13" v-if="scope.row.n13">
          {{scope.row.n13}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n14"
      v-if="lableList.n14"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n14" v-if="scope.row.n14">
          {{scope.row.n14}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n15"
      v-if="lableList.n15"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n15" v-if="scope.row.n15">
          {{scope.row.n15}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n16"
      v-if="lableList.n16"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n16" v-if="scope.row.n16">
          {{scope.row.n16}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n17"
      v-if="lableList.n17"
      >
      <template slot-scope="scope">
        <span :title="scope.row.n17" v-if="scope.row.n17">
          {{scope.row.n17}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.linkHistory"
      v-if="lableList.linkHistory"
      >
      <template slot-scope="scope">
        <!-- 联系历史 -->
        <span class="default-color" @click="FnGetSortableFn({type:'linkHistory',content:scope.row})">
          添加
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.n18"
      v-if="lableList.n18"
      width='100px'
      >
      <template slot-scope="scope">
        <span :title="scope.row.n18" v-if="scope.row.n18">
          {{scope.row.n18}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.state"
      v-if="lableList.state"
      width='100px'
      >
      <template slot-scope="scope">
        <span :title="scope.row.state" v-if="scope.row.state">
          {{scope.row.state}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.proportion"
      v-if="lableList.proportion"
      width='150px'
      >
      <template slot-scope="scope">
        <!-- proportion占比 -->
         <span class="span-proportion">
          <el-progress :text-inside="true" :stroke-width="12" :percentage="scope.row.proportion" color="green"></el-progress>
        </span> 
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.qualityTestingState"
      v-if="lableList.qualityTestingState"
      width='100px'
      >
      <template slot-scope="scope">
        <!-- 质检状态 -->
        <span :title="scope.row.qualityTestingState" v-if="scope.row.qualityTestingState">
          {{scope.row.qualityTestingState}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.myMission"
      v-if="lableList.myMission"
      class-name="my-mission-operation"
      width='500px'
      >
      <!-- taskManagement的操作 -->
      <template slot-scope="scope">
        <span class="scope-span" @click="FnGetSortableFn({type:'details',content:scope.row})">
          记录详情
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'delete',content:scope.row})">
          删除记录
        </span>
        <!-- <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'details',content:scope.row})">
          查看工单
        </span> -->
        <span class="scope-span scope-span-flex2" style="minWidth:80px" @click="FnGetSortableFn({type:'contactPlan',content:scope.row})">
          添加联系计划
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'linkHistory',content:scope.row})">
          联系历史
        </span>
        <span class="scope-span scope-span-flex2" v-if="scope.row.handleStatus == '4' && scope.row.isCreateOrder == '2'" @click="FnGetSortableFn({type:'addWorkOrder',content:scope.row})">
          发起工单
          <!-- <i v-if="1">发起工单</i> -->
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'tuneUp',content:scope.row})" v-if="scope.row.audio">
          录音调听
        </span>
        <!-- <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'changeWorkOrder',content:scope.row})">
          修改工单
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'changeQualityTesting',content:scope.row})">
          修改质检
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'changeBusiness',content:scope.row})">
          修改业务
        </span> -->
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.taskManagement"
      v-if="lableList.taskManagement"
      width="140"
      >
      <!-- taskManagement的操作 -->
      <template slot-scope="scope">
        <!-- <span class="scope-span" @click="FnGetSortableFn({type:'details',content:scope.row})">
          详情
        </span> -->
        <span class="scope-span span-delete" @click="FnGetSortableFn({type:'delete',content:scope.row})">
          删除
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.history"
      v-if="lableList.history"
      width="140"
      >
      <!-- history历史的操作 -->
      <template slot-scope="scope">
        <span class="scope-span span-delete" @click="FnGetSortableFn({type:'delete',content:scope.row})">
          删除
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.callConnected"
      v-if="lableList.callConnected"
      width="140"
      class-name="call-connected"
      >
      <!-- callConnected呼出接通记录的操作 -->
      <template slot-scope="scope">
        <span class="scope-span" @click="FnGetSortableFn({type:'tuneUp',content:scope.row})">
          调听
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'download',content:scope.row})">
          下载
        </span>
        <!-- <span class="scope-span" @click="FnGetSortableFn({type:'delete',content:scope.row})">
          导出
        </span> -->
      </template>
    </el-table-column>



    <!--自定义字段start-->
    <el-table-column
      v-if="(lableList.diyArray && lableList.diyArray.length)"
      :label="n1.value"
      v-for="(n1, i1) in lableList.diyArray"
      >
      <template slot-scope="scope">
        <span :title="scope.row[n1.key]" v-if="scope.row[n1.key]">
          {{scope.row[n1.key]}}
        </span>
        <span v-else>
          -
        </span>
      </template>
    </el-table-column>
    <!--自定义字段end-->

    <el-table-column
      :label="lableList.operation"
      v-if="lableList.operation"
      class-name="operation"
      :width="lableList.width"
      >
      <!-- 操作 -->
      <template slot-scope="scope">
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'releaseOrder',content:scope.row})" v-if="scope.row.releaseOrder">
          释放工单
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'additionalComments',content:scope.row})" v-if="scope.row.additionalComments">
          附加意见
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'handlingOpinions',content:scope.row})" v-if="scope.row.handlingOpinions">
          添加处理意见
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'qualityStatus',content:scope.row})" v-if="scope.row.qualityStatus">
          待确认
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'details',content:scope.row})" v-if="scope.row.details">
          工单详情
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'changeWorkOrder',content:scope.row})" v-if="scope.row.changeWorkOrder">
          修改工单
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'changeQualityTesting',content:scope.row})" v-if="scope.row.changeQualityTesting">
          修改质检
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'changeBusiness',content:scope.row})" v-if="scope.row.changeBusiness">
          修改业务
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'recordDetails',content:scope.row})" v-if="scope.row.recordDetails">
          记录详情
        </span>
        <span class="scope-span scope-span-flex2" @click="FnGetSortableFn({type:'handleBusiness',content:scope.row})" v-if="scope.row.handleBusiness">
          办理业务处理
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'tuneUp',content:scope.row})" v-if="scope.row.audio">
          录音调听
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'handleWorkOrder',content:scope.row})" v-if="scope.row.handleWorkOrder">
          处理工单
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'download',content:scope.row})" v-if="scope.row.see">
          查看
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'qualityHandle',content:scope.row})" v-if="scope.row.qualityHandle"> 
          质检处理
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'modify',content:scope.row})" v-if="scope.row.modify"> 
          修改
        </span>
        <span class="scope-span" @click="FnGetSortableFn({type:'changePassword',content:scope.row})" v-if="scope.row.changePassword"> 
          修改密码
        </span>
        <span class="scope-span color-danger" @click="FnGetSortableFn({type:'delete',content:scope.row})" v-if="scope.row.delete"> 
          删除
        </span>
        <span class="scope-span color-danger" @click="FnGetSortableFn({type:'withdraw',content:scope.row})" v-if="scope.row.withdraw"> 
          撤回
        </span>
        <span class="scope-span color-danger" @click="FnGetSortableFn({type:'downLoad',content:scope.row})" v-if="scope.row.downLoad"> 
          下载
        </span>
        <!-- <span class="scope-span" @click="FnGetSortableFn({type:'delete',content:scope.row})" v-if="scope.row.delete"> 
          办理业务处理
        </span> -->
      </template>
    </el-table-column>

    <!-- <el-table-column
      :label="lableList.n19"
      v-if="lableList.n19"
      lableClassName='a123'
      >
      <template slot-scope="scope">
        <span>
          <!-- {{scope.row.n18}} -->
        <!-- </span>
      </template>
    </el-table-column> -->
  </el-table>
  <div class="my-missionNum-btn" v-if="lableList.myMissionNum">
    <el-button @click="FnGetSortableFn({type:'distribution',content:''})" v-show="getBtnList.call_out_task_task_manager_my_task_select">
      <i class="my-missionNum-icon icon-distribution"></i>
      分配客户
    </el-button>
    <el-button @click="FnGetSortableFn({type:'transfer',content:''})" v-show="getBtnList.call_out_task_task_manager_my_task_select">
      <i class="my-missionNum-icon icon-transfer"></i>
      转移客户
    </el-button>
  </div>
  <div class="block" v-if="talLength!=0">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[15,50,100,200,500,1000,5000,10000,50000]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="talLength">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: '',
  data(){
    return {
      multipleSelection:[]
    }
  },
  props:{
    loading:{
      type:Boolean,
      default:false
    },
    lableList:{
      type:Object,
      default:function(){
        return {}
      }
    },
    tableData:{
      type:Array,
      default:function(){
        return []
      }
    },
    talLength:{
      default:0
    },
    pageSize:{
      default:15
    },
    pageNum:{
      default:1
    },
    selections:{
      type:Boolean,
      default:false
    }


  },
  created(){
  },
  mounted(){
   
  },  
  methods:{
    // FnSelectable(e,v) {//是否不被勾选
    //   if(e.canSelect) {
    //     return false
    //   }else {
    //     return true
    //   }
    // },  
    rowClick (e) {
      this.$emit('getSortableFn',{type:'selectionRow',content:e})//单击行发生
    },
    FnGetSortableFn (obj) {
        this.$emit('getSortableFn',{type:obj.type,content:obj.content})
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.$emit('getSortableFn',{type:'pageSize',content:val})
      },
    handleCurrentChange(val) {
        this.$emit('getSortableFn',{type:'pageNum',content:val})
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
        this.$emit('getSortableFn',{type:'selection',content:this.multipleSelection})
    }

  },
  components:{

  },
  computed:{
    ...mapGetters(['getInformation','getBtnList'])
  },
  watch:{
    'currentPage':{
      handler:function(nv,ov){
        // console.log(nv)
      },
      deep:true
    },
    'tableData':{
      handler:function(nv,ov){

      },
      deep:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.show-table {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-bottom: 30px;
  text-align: center;
  background-color: #fff!important;
  .call-up {//拨打电话，包含按钮
    span {
      float: left;
    }
    .call-up-icon {
      float: right;
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height:15px;
      transition: all 0.5s;
      &:hover {
        transform: scale(1.5);
        -ms-transform:scale(1.5);     /* IE 9 */
        -moz-transform:scale(1.5);     /* Firefox */
        -webkit-transform:scale(1.5); /* Safari 和 Chrome */
        -o-transform:scale(1.5);
      }
    }
  }
  .call-up-null {
    text-align: center;
    span {
      float: none;
    }
  }
  .my-missionNum-btn {
    height: 50px;
    background-color: #F8FAFB;
    border:1px solid #EBEEF5;
    border-top: 0;
    text-align: left;
    padding: 10px 0 0 15px;
    .my-missionNum-icon {
      display: inline-block;
      width: 15px;
      height: 15px;
      vertical-align: middle;
      background-repeat: no-repeat;
    }
    // .icon-distribution {
    //   background-image: url("../../img/distribution.png")
    // }
    // .icon-transfer {
    //   background-image: url("../../img/transfer.png")
    // }
  }
  .cell,td {
    text-align: center;
  }
  .el-pagination {
    margin-top: 20px;
  }
  .scope-span {
    display: inline-block;
    color: rgb(44,140,238);
    vertical-align: middle;
  }
  .span-delete {
      color: rgb(215,100,73);
  }
  .call-connected {
    .scope-span {
      width: 33%;
    }
  }
  .overtime {//超时
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
  }
  .operation {
    
  }
}
</style>